<template>
    <div>
        <h2>{{fullname}}</h2>
        <button @click="setFullname">修改</button>
        <h2>{{scoreLevel}}</h2>
</div>
</template>
<script setup>
import { computed, reactive ,ref} from 'vue'

// 1.定义数据
let names = reactive({
    firstName:"jack",
    lastName:"brown"
})
// const fullname = computed(()=>
// {
//     return names.firstName + " " +names.lastName
// })

const fullname  = computed({
    set:function(newValue){
        const tempNames = newValue.split(" ")
        names.firstName = tempNames[0]
        names.lastName = tempNames[1]
    },
    get:function(){
        return names.firstName + " "+ names.lastName
    }

})

function setFullname(){
    fullname.value = 'coder inzv'
}
// 2.定义score
 const score = ref(89)
 const scoreLevel = computed(()=>{
    return score.value >= 60 ? "及格":"不及格"
 })
</script>
<style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
</style>